import {useState} from "react";
import styles from './index.module.css'
import {Card, Button, Checkbox, Form, Input} from "antd";
import {Link} from "react-router-dom";

function Register() {

    return (
        <div className={styles.bg}>
            <Card title={'账户注册'} className={styles.register_card}
                  actions={[]}>
                <Form
                    labelCol={{
                        span: 6,
                    }}
                    wrapperCol={{
                        span: 20,
                    }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="账号"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入账号!',
                                trigger: 'blur'
                            },
                            {min: 3, max: 30, message: '账号长度在3-30个字符之间', trigger: 'blur'}
                        ]}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                                trigger: 'blur'
                            },
                            {min: 3, max: 30, message: '密码长度在3-30个字符之间', trigger: 'blur'}
                        ]}
                    >
                        <Input.Password/>
                    </Form.Item>

                    <Form.Item
                        label="再次输入密码"
                        name="re_password"
                        rules={[
                            {
                                required: true,
                                message: '请再次输入密码!',
                                trigger: 'blur'
                            },
                            {min: 3, max: 30, message: '密码长度在3-30个字符之间', trigger: 'blur'}
                        ]}
                    >
                        <Input.Password/>
                    </Form.Item>

                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号!',
                                trigger: 'blur'
                            },
                            {
                                pattern: /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/,
                                message: '请输入正确手机号',
                                trigger: 'blur'
                            }
                        ]}
                    >
                        <Input/>
                    </Form.Item>


                    <Form.Item
                        name="notice"
                        valuePropName="checked"
                        wrapperCol={{
                            span: 23,
                        }}
                    >
                        <Checkbox>已阅读<Button type={"link"} href={'#/usernotice'}>《用户须知》</Button></Checkbox>
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            注册
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Register